<template>
  <div class="supplierFile">
    <pageCard :title-name="'附件列表'" :type="'pageTitle'">
      <template #header>
        <i class="el-icon-close closeIcon" @click="pageClose" />
      </template>
      <div class="topText">文件名：</div>
      <el-input v-model="search.name" placeholder="请输入" class="searchInput" style="width: 150px" />
      <el-button type="primary" class="topBtn" icon="el-icon-search" @click="searchClick">搜索</el-button>
      <div class="topBtnDiv">
        <!-- <el-button type="primary" plain class="topBtn" @click="download()">下载</el-button> -->
      </div>
      <myTable
        ref="myTable"
        style="height: 100%"
        :row-key="'fileId'"
        :table-label="tableLabel"
        :table-data="tableData"
        :table-total-size="tableTotalSize"
        :search-data="searchData"
        @getTableData="getTableData"
        @handleSelectionChange="handleSelectionChange"
        @rowClickChange="rowClickChange"
      >
        <template #operating="slotProps">
          <el-link :underline="false" type="primary" @click="download(slotProps.rowValue)">下载</el-link>
          <!-- <el-link :underline="false" type="primary" @click="editFile()">修改</el-link>
          <el-link :underline="false" type="danger" @click="deleteClick()">删除</el-link> -->
          <!-- <p>{{ slotProps.propValue }}</p> -->
        </template>
      </myTable>
      <pagination
        :table-total-size="tableTotalSize"
        :search-data="searchData"
        @getTableData="$refs.myTable.getTableData()"
      />
    </pageCard>
  </div>
</template>

<script>
import { downLoadFile } from '@/utils/download'
import { getSupplierFile } from '@/api/system-management'
import pageCard from '@/components/page/pageCard'
import myTable from '@/components/Table/index'
import pagination from '@/components/Table/pagination'
export default {
  name: 'SupplierFile',
  components: {
    pageCard,
    myTable,
    pagination
  },
  props: {
    currentSupplier: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 主页面数据
      search: {
        name: '',
        chooseDate: null
      },
      searchData: {
        pageSize: 10,
        currentPage: 1,
        sort: {},
        params: {}
      },
      // table需要的数据
      tableData: [],
      tableLabel: [
        // {
        //   type: 'selection',
        //   width: '55'
        // },
        {
          prop: 'type',
          label: '类型',
          width: 280,
          showOverflowTooltip: false
        },
        {
          prop: 'name',
          label: '文件名',
          // minWidth: 120,
          // maxWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'operating',
          label: '操作',
          fixed: 'right',
          type: 'scope',
          width: 70,
          showOverflowTooltip: false
        }
      ],
      tableTotalSize: null,
      multipleSelection: [],
      currentRow: {}
    }
  },
  methods: {
    editFile() {},
    deleteClick() {},
    download(row) {
      downLoadFile(process.env.VUE_APP_BASE_API + row.url, row.name)
    },
    pageClose() {
      this.$emit('setPageIndex')
    },
    getTableData(cab) {
      if (this.currentSupplier.id === undefined) {
        return
      }
      this.searchData.params['id'] = this.currentSupplier.id
      getSupplierFile(this.searchData).then((res) => {
        this.tableData = res.data
        this.tableTotalSize = res.total_count
        cab(res.data)
      })
    },
    // 搜索
    searchClick() {
      this.searchData.currentPage = 1
      this.searchData.params['name'] = this.search.name
      this.$refs.myTable.getTableData()
    },
    // 复选框回调函数
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击行回调函数
    rowClickChange(val) {
      this.currentRow = val
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../../styles/pageTableTop.scss';
.supplierFile {
  height: 100%;
  /deep/label {
    font-weight: 500;
  }
  .closeIcon {
    float: right;
    padding-right: 10px;
    cursor: pointer;
  }
}
</style>
